// 导航
let box = document.querySelector(".box");
let nav = document.querySelector(".top");
let btn = document.querySelector(".btn");

// 点击跳转首页
btn.onclick = function () {
  location.href = "../html/login.html";
};

let daohang = nav.querySelector(".daohang");
let lis = daohang.querySelectorAll("ul li");
// console.log(lis);

// 点击切换导航栏高亮

lis.forEach(function (item, index) {
  item.onclick = function () {
    if (index == 0) {
      location.href = "../html/shouye.html";
    }
    if (index == 1) {
      location.href = "../html/shouye.html#matter1";
    }
    if (index == 3) {
      location.href = "../html/course.html";
    }
    if (index == 4) {
      location.href = "../html/tool.html";
    }
    if (index == 5) {
      location.href = "../html/case.html";
    }
  };
});

// 回到顶部
let customerService = document.querySelector(".customerService");
let back_top = customerService.querySelector(".back_top");

// 显示回到顶部按钮
window.onscroll = function () {
  if (!(scrollY >= 450)) {
    back_top.style.display = "none";
    return;
  }
  back_top.style.display = "block";
};

// 点击回到顶部
back_top.onclick = function () {
  scrollTo({ top: 0, behavior: "smooth" });
};

// content2 页面切换
// content2智慧营销数据渲染
let content2 = document.querySelector(".content2");
let daohang3 = content2.querySelector(".daohang3");
let p2 = daohang3.querySelectorAll("p");
let page = content2.querySelector(".page");

data_content2.forEach((item) => {
  let str = `
  <div class="list">
                <div class="con">
                  <div class="tupian">
                    <img
                      src="	${item.image}"
                      alt=""
                    />
                  </div>
                  <div class="nav">
                    <h5>${item.title}</h5>
                    <p class="qq">
                      ${item.text}
                    </p>
                    <div class="nav1">
                      <p>免费申请</p>
                      <p>查看详情</p>
                    </div>
                  </div>
                </div>
              </div>`;
  page.innerHTML += str;
});

let lists = content2.querySelectorAll(".list");
// console.log(lists);

p2.forEach(function (item, index) {
  item.onmouseover = function () {
    for (var n = 0; n < p2.length; n++) {
      p2[n].classList.remove("active");
    }
    this.classList.add("active");
    for (var m = 0; m < lists.length; m++) {
      lists[m].style.display = "none";
    }
    lists[index].style.display = "block";
  };
});

// content4 经典案例数据渲染
let content4 = document.querySelector(".content4");
let content4_list = content4.querySelector(".content4_list");
// console.log(content4_list);

data_content4.forEach((item) => {
  let str = `<div class="list">
                <img
                  src="${item.image}"
                  alt=""
                />
                <div class="title">${item.title}</div>
                <div class="text">
                  ${item.text}
                </div>
              </div>`;
  content4_list.innerHTML += str;
});
